<template>
  <div class="login_container">
    <div class="login_box">
      <!--头像区域开始-->
      <div class="avatar_box">
        <img src="../assets/image/avatar.jpg" alt="用户头像" />
      </div>
      <!--头像区域结束-->

      <!--登录表单区开始-->
      <!--使用v-model给表单进行数据绑定-->
      <!-- ref 绑定组件实例对象名称 会在组件的$refs对象中-->
      <el-form
        class="login_form"
        ref="loginFormRef"
        :model="loginForm"
        label-width="0px"
        :rules="loginRules"
      >
        <!--用户名-->
        <!--prop绑定rules中的规则名-->
        <el-form-item prop="username">
          <!--element中的icon 不能直接使用prefix-icon的值生成的类设置样式-->
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user-solid"
            class="userName"
          ></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password">
          <!--element的这个prefix-icon属性也可配置第三方的字体图标类-->
          <el-input
            prefix-icon="iconfont icon-mima"
            v-model="loginForm.password"
            type="password"
            class="passWord"
          ></el-input>
        </el-form-item>
        <!--按钮区-->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
      <!--登录表单区结束-->
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      //  登录表单绑定数据
      loginForm: {
        username: "admin",
        password: "123456"
      },
      //  表单验证规则
      loginRules: {
        //  验证用户名  规则名称要与要验证的数据绑定的变量名相同
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }, //  trigger事件触发时进行检查 blur失去焦点事件
          {
            min: 3,
            max: 10,
            message: "长度应在3到10个字符",
            trigger: "blur"
          }
        ],
        //  验证密码
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            message: "密码最少需要六位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    login() {
      //  validate ElementUI组件表单预验证方法，valid是预验证结果，false为验证失败，true为验证成功
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return; // 如果预验证失败，则直接返回
        //  使用axios发送网络请求，需要先在main.js中引入axios并挂载到vue.prototype上，以及配置请求基准地址
        //  返回的是一个promise对象，可使用async、await简化(await只能修饰async方法)
        const { data: res } /* 解构并重命名为res */ = await this.$http.post(
          "login",
          this.loginForm
        ); // post请求，login请求地址，this.loginForm 路由参数
        if (res.meta.status !== 200)
          return this.$message.error("账号或密码有误，请重新输入！"); //  message是ElementUI中的消息弹框提示栏，需要先引入Message
        this.$message.success(
          "登录成功!" /* {
          message: "登录成功",
          type: "success"
        } */
        );
        /* 1.将登录成功之后的token保存到客户端的sessionStorage（会话期间的存储机制）中
         *    1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
         *    1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
         * 在浏览器控制台的Application - Storage - Session Storage 中可查看保存的token
         */
        window.sessionStorage.setItem("token", res.data.token); // 使用window的sessionStorage.setItem来将token保存到sessionStorage中,参数列表为 1：要存入的键名 2：值
        /*  2.通过编程式导航跳转到后台主页，路由地址是/home */
        this.$router.push("/home");
      });
    },
    //  重置登录表单
    resetLoginForm() {
      //  resetFields是Element表单组件方法，用来重置表单
      this.$refs.loginFormRef.resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
//scoped表示样式只在此组件生效

.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: white;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -225px;
  margin-top: -150px;

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px #eee solid;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    margin-left: -75px;
    top: -75px;
    background-color: #eee;

    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
    }
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .userName {
      font-size: 16px !important;
    }

    .passWord {
      font-size: 14px !important;
    }
  }
}
</style>
